<html>
<head>
    <title tiles:fragment="title">Message :: List</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link href="../../../resources/css/bootstrap.min.css" rel="stylesheet" media="screen" th:href="@{/resources/css/bootstrap.min.css}"/>
    <link href="../../../resources/css/core.css" rel="stylesheet" media="screen" th:href="@{/resources/css/core.css}"/>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="../../../resources/js/bootstrap.min.js" th:src="@{/resources/js/bootstrap.min.js}"></script>
</head>
<body>
<div tiles:fragment="content">
    <table class="table table-bordered table-striped">
        <thead>
        <tr>
            <td>ID</td>
            <td>Title</td>
            <td>Text</td>
            <td>Created</td>
        </tr>
        </thead>
        <tbody>
        <tr th:if="${messages.empty}">
            <td colspan="4">No messages</td>
        </tr>
        <tr th:each="message : ${messages}">
            <td th:text="${message.id}">1</td>
            <td><a href="#" th:text="${message.title}">Title ...</a></td>
            <td th:text="${message.text}">Text ...</td>
            <td th:text="${#calendars.format(message.created)}">July 11, 2012 2:17:16 PM CDT</td>
        </tr>
        </tbody>
    </table>
</div>
</body>
</html>